<template>
	<div id="all">
		<div id="left">
			<el-tabs
				class="demo-tabs"
				@tab-click="handleClick"
				tab-position="left"
			>
				<el-tab-pane
					v-for="item in expList"
					:key="item.id"
					:label="item.name"
				>
					<el-table
						max-height="400px"
						:data="item.stus"
						style="width: 100%"
						@selection-change="handleSelectionChange"
						@select="Select(item.id)"
					>
						<!-- handleSelectionChange 不带参，就返回复选框选中的项-->
						<el-table-column
							type="selection"
							width="55"
						></el-table-column>
						<el-table-column label="学生姓名" width="350">
							<template #default="scope">
								{{ scope.row.name }}
							</template>
						</el-table-column>
						<el-table-column label="删除">
							<template #default="scope">
								<el-popconfirm
									width="220"
									confirm-button-text="确定"
									cancel-button-text="取消"
									:icon="InfoFilled"
									icon-color="#626AEF"
									title="确定删除吗?"
									@confirm="Delete(scope.row)"
								>
									<template #reference>
										<el-button size="small" type="danger"
											>删除</el-button
										>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 20px">
						<el-button type="primary" @click="publish(tableData)"
							>发布</el-button
						>
						<el-button type="primary" @click="$router.back()"
							>返回</el-button
						>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div id="right">
			<h4>导入学生目录</h4>
			<el-upload
				action="#"
				:on-preview="handlePreview"
				:on-remove="handleRemove"
				:on-exceed="handleExceed"
				:on-change="changeFile"
				accept=".xlsx, .xls"
				:limit="1"
				:auto-upload="false"
				:data="cid"
			>
				<template #trigger>
					<el-button type="primary">点击此处选择文件</el-button>
				</template>
				<el-button type="success" @click="UpdateFile" class="upload"
					>上传</el-button
				>
				<template #tip>
					<div class="el-upload__tip"> 文件大小不能超过1MB. </div>
				</template>
			</el-upload>
			<el-button text @click="table = true">点击手动上传</el-button>
			<el-drawer
				v-model="table"
				title="手动添加学生"
				direction="rtl"
				size="50%"
			>
				<span
					><el-input v-model="sid_update" placeholder="请输入学号"
				/></span>
				<span
					><el-input
						v-model="name_update"
						placeholder="请输入姓名" /></span
				><br />
				<el-button @click="updatestudents">提交</el-button>
			</el-drawer>
		</div>
	</div>
</template>
<script setup lang="ts">
//@ts-nocheck
import {
	getStudent,
	postEx,
	uploadFile,
	delStudent,
	handaddStudent,
} from '@/api/request'
import { ref } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
// 引入路由
import { useRoute } from 'vue-router'
const route = useRoute()
const jwtToken = localStorage.getItem('jwtToken')
const File = ref() //保存文件
const eid = ref() //获取实验的id
const table = ref(false)
const sid_update = ref('')
const name_update = ref('')
//const cid_update = ref('')

const expList = ref([
	{
		id: 1,
		name: '液体粘滞系数的测定',
		stus: [],
	},
	{
		id: 2,
		name: '液体表面张力系数的测定',
		stus: [],
	},
	{
		id: 3,
		name: '刚体转动惯量的测定',
		stus: [],
	},
	{
		id: 4,
		name: '震动法测材料的杨氏模量',
		stus: [],
	},
	{
		id: 9,
		name: '电表改装与校准',
		stus: [],
	},
	{
		id: 10,
		name: '密立根油滴实验',
		stus: [],
	},
	{
		id: 15,
		name: '声速的测定',
		stus: [],
	},
	{
		id: 16,
		name: '用牛顿环仪测量透镜的曲率半径',
		stus: [],
	},
	{
		id: 17,
		name: '迈克尔逊干涉仪的调节与使用',
		stus: [],
	},
	{
		id: 19,
		name: '用分光计测光波波长',
		stus: [],
	},
])
const cid = route.query.cid //这是为了拼接文件，一并上传
// 返回的学生数据
const stu_result = ref([])
// 查询班级的学生

const changeFile = (file) => {
	File.value = file
}

//文件发生改变时，获取文件
onMounted(() => {
	console.log('cid', route.query.cid)
	getStudent(jwtToken, cid).then((res) => {
		console.log(res, '返回的学生数据')
		stu_result.value = res.data.data
		// 处理result的数据
		stu_result.value = stu_result.value.map((item) => ({
			sid: item.sid,
			cid: item.cid,
			name: item.name,
			updateTime: item.updateTime,
			state: 0,
			eid: '',
		}))
		console.log('处理后的stu_result', stu_result.value)
		// 处理classList的数据
		expList.value = expList.value.map((classInfo) => ({
			id: classInfo.id,
			name: classInfo.name,
			stus: stu_result.value,
			state: '0',
		}))
		console.log('处理后的classlist数据', expList.value)
	})
})
const Delete = async (row) => {
	console.log('delete', row.sid)
	let res = await delStudent(jwtToken, row.sid)
	if (res.status == 200) {
		ElMessage({
			message: '删除成功',
			type: 'success',
		})
		location.reload()
	} else ElMessage.error('删除失败')
	console.log(res)
}
const handleClick = (x, y) => {
	console.log('xxxxxxxxxxxxx', x, y)
}
const Select = (id) => {
	eid.value = id
}
const UpdateFile = () => {
	//console.log(uploadRef)
	let formData = new FormData()
	let data = {
		cid: cid,
		file: File.value.raw,
	}
	formData.append('cid', cid)
	formData.append('file', File.value.raw)
	console.log(formData.get('cid'), data)
	uploadFile(jwtToken, formData).then((res) => {
		console.log('文件上传结果：', res)

		if (res.status == 200) {
			location.reload()
			ElMessage({
				message: '上传成功',
				type: 'success',
			})
			location.reload()
		} else {
			ElMessage.error('文件上传失败')
		}
	})
} //文件上传
const handleExceed = () => {
	ElMessage.error('一次只能上传一个文件')
}

// 点击勾选
//点击的学生数组
const selected = ref([])
// 最后要传递的包含三个id的对象
const sids = ref([])
const data = ref({
	cid: '',
	eid: '',
	sids: [],
})
//下面的逻辑是每次点击复选框时更新data
const handleSelectionChange = (arr) => {
	sids.value = []
	selected.value = arr
	// console.log(id,"ssss",y);
	// selected.value=y
	console.log(selected.value)
	// selected.value.eid=id
	selected.value.forEach((item) => {
		sids.value.push(item.sid)
	})
	console.log(sids.value)
	data.value.cid = cid
	data.value.sids = sids.value
	data.value.eid = eid.value
	console.log('data', data.value)
}
// 发布实验
const publish = (row) => {
	// console.log(row.value)
	const jwtToken = localStorage.getItem('jwtToken')
	postEx(jwtToken, data.value).then((res) => {
		console.log(res, '发布返回的结果')
	})
	ElMessage.success('发布成功')
}
const updatestudents = async () => {
	const handdata = {
		name: name_update.value,
		cid: cid,
		sid: sid_update.value,
	} //手动上传的学生数据
	console.log(handdata)

	let res = await handaddStudent(jwtToken, handdata)
	if (res.data.code == 11250) {
		ElMessage.error('重复上传')
	} else if (res.status == 200) {
		ElMessage({
			message: '上传成功',
			type: 'success',
		})
		location.reload()
	}
	console.log('hand', res)
}
// 选框状态
const checked = ref(true)
</script>

<style lang="scss" scoped>
#all {
	display: flex;
	justify-content: space-between;
	height: 5000px;

	#left {
		width: 800px;
		margin-right: 30px;
	}

	#right {
		.upload {
			margin-left: 10px;
			margin-top: 8px;
		}
	}
}
</style>